<template>
  <div style="margin-bottom: 50px">
    <van-skeleton title :row="15" :loading="isFirst">
    <div class="VOrderContainer" > 
      <van-tabs
        color="red"
        class="VOrderIndex"
       
        v-model:active="active_top"
        @click-tab="methods.onClickTab"
      >
        <div class="my_divider" style="margin-top: 6px"></div>
        <!-- 全部  start-->
        <van-tab title="全部" name="0"> </van-tab>
        <!-- 全部  end-->

        <!-- 已上架  start-->
        <van-tab title="已上架" name="1"> </van-tab>
        <!-- 已上架  end-->

        <!-- 未上架  start-->
        <van-tab title="未上架" name="2"> </van-tab>
        <!-- 未上架  end-->

        <div style="display: flex">
          <div style="border-right: 1px solid #ebedf0;min-height: 80vh;padding-bottom: 70px;">
            <van-sidebar
              v-model="active"
              @change="methods.onChange"
              style="
                --van-sidebar-selected-border-color: red;
                --van-sidebar-selected-border-height: 45px;

                padding: 5px;
                /* border-right: 1px solid red; */
              "
            >
              <van-sidebar-item
                v-for="item in shopData"
                :key="item.id"
                :title="item.name"
                :badge="item.goods.length"
              />
              <!-- <van-sidebar-item title="无类别" badge="0" /> -->
            </van-sidebar>
          </div>

          <div class="" style="width: 100%; height: 100%">
            <div class="shops">
              <div class="my_divider"></div>



              <!-- 判断数据是否加载完成 如果没加载完成 因为我循环了该数组的属性 就会报undfind -->
              <div v-if="shopData.length !== 0">
                <!-- 全部的商品 -->
                
                <div v-if="active_top === '0'">
                  <div style="overflow-y: scroll;max-height: 80vh;padding-bottom: 70px;">
                  <div v-if="shopData[active]?.goods.length !== 0">
                    <div
                      class="shop my_divider"
                      v-for="(item, i) in shopData[active]?.goods"
                      :key="i"
                    >
                      <div class="shop-img" @click="()=>{ methods.toDetail(item)}">
                        <img
                          :src="item.photo"
                          alt=""
                          width="60"
                          height="60"
                          style="border-radius: 5px"
                        />
                        <van-tag
                          style="position: absolute; left: 12%; bottom: 5%"
                          type="success"
                          v-if="item.isShelve === 1"
                          >已上架</van-tag
                        >
                        <van-tag
                          style="position: absolute; left: 12%; bottom: 5%"
                          type="warning"
                          v-if="item.isShelve === 0"
                          >未上架</van-tag
                        >
                        <van-tag
                          style="position: absolute; right: 0%; top: 0%"
                          type="success"
                          v-if="item.isTop === 1"
                          >顶</van-tag
                        >
                      </div>
                      <div
                        style="flex: 1; padding: 5px; box-sizing: border-box"
                      >
                        <div style="font-size: 14px">{{ item.name }}</div>
                        <div class="hui" style="font-size: 12px">
                          销量: {{ item.sales }} ,库存: {{ item.inventory }}
                        </div>
                        <div style="font-size: 12px">
                          <div v-if="item.isPromote === 0">
                            <span class="red">￥ {{ item.price }} </span>/份
                          </div>
                          <div
                            v-if="item.isPromote === 1"
                            style="display: flex"
                          >
                            <span
                              class="red"
                              style="text-decoration: line-through"
                              >￥ {{ item.price }}
                              <span style="color: #000">/份</span></span
                            >
                            <span class="red mlw"
                              >￥ {{ item.promotePrice }}
                              <span style="color: #000">/份</span></span
                            >
                          </div>
                        </div>
                      </div>
                      <div class="" style="display: flex; align-items: end">
                        <van-button
                          size="small"
                          round
                          style="min-width: 70px; height: 30px"
                          type="danger"
                          @click="methods.operate(item)"
                        >
                          操作
                        </van-button>
                      </div>
                    </div>
                  </div>
                  <div v-if="shopData[active]?.goods.length === 0">
                    <van-empty description="暂无数据"  />
                  </div>
                </div>
              </div>
                <!-- 全部的商品 -->

                <!-- 上架的商品 start-->
                
                <div v-if="active_top === '1'">
                  <div style="overflow-y: scroll;max-height: 80vh;padding-bottom: 70px;">
                   <div  v-if="shopData[active]?.goods.filter(
                      (d) => d.isShelve === 1
                    ).length !== 0">
                   <div
                    class="shop my_divider"
                    v-for="(item, i) in shopData[active]?.goods.filter(
                      (d) => d.isShelve === 1
                    )"

                    :key="i"
                  >
                    <div class="shop-img" @click="()=>{ methods.toDetail(item)}">
                      <img
                        :src="item.photo"
                        alt=""
                        width="60"
                        height="60"
                        style="border-radius: 5px"
                      />
                      <van-tag
                        style="position: absolute; left: 12%; bottom: 5%"
                        type="success"
                        v-if="item.isShelve === 1"
                        >已上架</van-tag
                      >
                      <van-tag
                        style="position: absolute; left: 12%; bottom: 5%"
                        type="warning"
                        v-if="item.isShelve === 0"
                        >未上架</van-tag
                      >
                      <van-tag
                        style="position: absolute; right: 0%; top: 0%"
                        type="success"
                        v-if="item.isTop === 1"
                        >顶</van-tag
                      >
                    </div>
                    <div style="flex: 1; padding: 5px; box-sizing: border-box">
                      <div style="font-size: 14px">{{ item.name }}</div>
                      <div class="hui" style="font-size: 12px">
                        销量: {{ item.sales }} ,库存: {{ item.inventory }}
                      </div>
                      <div style="font-size: 12px">
                          <div v-if="item.isPromote === 0">
                            <span class="red">￥ {{ item.price }} </span>/份
                          </div>
                          <div
                            v-if="item.isPromote === 1"
                            style="display: flex"
                          >
                            <span
                              class="red"
                              style="text-decoration: line-through"
                              >￥ {{ item.price }}
                              <span style="color: #000">/份</span></span
                            >
                            <span class="red mlw"
                              >￥ {{ item.promotePrice }}
                              <span style="color: #000">/份</span></span
                            >
                          </div>
                        </div>
                    </div>
                    <div class="" style="display: flex; align-items: end">
                      <van-button
                        size="small"
                        round
                        style="min-width: 70px; height: 30px"
                        type="danger"
                       
                        @click="methods.operate(item)"
                      >
                        操作
                      </van-button>
                    </div>
                  </div>
                </div>

                <div  v-if="shopData[active]?.goods.filter(
                      (d) => d.isShelve === 1
                    ).length === 0">
                  <van-empty description="暂无数据"  />
                </div>
                </div>
              </div>
                <!-- 上架的商品 end-->

                <!-- 下架的商品 start-->
                <div v-if="active_top === '2'">
                  <div style="overflow-y: scroll;max-height: 80vh;padding-bottom: 70px;">
                  <div  v-if="shopData[active]?.goods.filter(
                      (d) => d.isShelve === 0
                    ).length !== 0">
                  <div
                    class="shop my_divider"
                    v-for="(item, i) in shopData[active]?.goods.filter(
                      (d) => d.isShelve === 0
                    )"
                    :key="i"
                  >
                    <div class="shop-img" @click="()=>{ methods.toDetail(item)}">
                      <img
                        :src="item.photo"
                        alt=""
                        width="60"
                        height="60"
                        style="border-radius: 5px"
                      />
                      <van-tag
                        style="position: absolute; left: 12%; bottom: 5%"
                        type="success"
                        v-if="item.isShelve === 1"
                        >已上架</van-tag
                      >
                      <van-tag
                        style="position: absolute; left: 12%; bottom: 5%"
                        type="warning"
                        v-if="item.isShelve === 0"
                        >未上架</van-tag
                      >
                      <van-tag
                        style="position: absolute; right: 0%; top: 0%"
                        type="success"
                        v-if="item.isTop === 1"
                        >顶</van-tag
                      >
                    </div>
                    <div style="flex: 1; padding: 5px; box-sizing: border-box">
                      <div style="font-size: 14px">{{ item.name }}</div>
                      <div class="hui" style="font-size: 12px">
                        销量: {{ item.sales }} ,库存: {{ item.inventory }}
                      </div>
                      <div style="font-size: 12px">
                          <div v-if="item.isPromote === 0">
                            <span class="red">￥ {{ item.price }} </span>/份
                          </div>
                          <div
                            v-if="item.isPromote === 1"
                            style="display: flex"
                          >
                            <span
                              class="red"
                              style="text-decoration: line-through"
                              >￥ {{ item.price }}
                              <span style="color: #000">/份</span></span
                            >
                            <span class="red mlw"
                              >￥ {{ item.promotePrice }}
                              <span style="color: #000">/份</span></span
                            >
                          </div>
                        </div>
                    </div>
                    <div class="" style="display: flex; align-items: end">
                      <van-button
                        size="small"
                        round
                        style="min-width: 70px; height: 30px"
                        type="danger"
                        @click="methods.operate(item)"
                      >
                        操作
                      </van-button>
                    </div>
                  </div>
                </div>

                <div  v-if="shopData[active]?.goods.filter(
                      (d) => d.isShelve === 0
                    ).length === 0">
                  <van-empty description="暂无数据"  />
                </div>
                
                </div>
              </div>
                <!-- 下架的商品 end-->
              </div>
              <!-- <div class="my_divider"></div> -->
            </div>
          </div>
        </div>
      </van-tabs>



      <!-- 商品操作按钮 start -->
      <van-dialog
        :show="show"
        title="商品操作"
        show-cancel-button
        :showConfirmButton="false"
        @cancel="show = fasle"
      >
        <div class="my_divider"></div>
        <div class="mtw">
          <div class="dialog_flex pdw">
            <van-button
              type="primary"
              style="width: 9rem"
              @click="() => ((sheet_show = true), (show = false))"
              >补货</van-button
            >
            <van-button
              type="success"
              class="green-btn"
              style="width: 9rem"
              v-if="data.operateObj.isPromote === 0"
              @click="() => ((discount_show = true), (show = false))"
              >商品折扣</van-button
            >

            <van-button
              type="success"
              class="green-btn"
              style="width: 9rem"
              v-if="data.operateObj.isPromote === 1"
              @click="methods.cancelPromoteGoods"
              >取消折扣</van-button
            >
          </div>

          <div class="dialog_flex pdw">
            <van-button
              type="warning"
              style="width: 9rem"
              v-if="data.operateObj?.isTop === 0"
              @click="() => methods.toping(1)"
            >
              置顶
            </van-button>

            <van-button
              type="warning"
              style="width: 9rem"
              v-if="data.operateObj?.isTop === 1"
              @click="() => methods.toping(0)"
            >
              取消置顶
            </van-button>

            <van-button
              type="danger"
              class="zi-btn"

              style="width: 9rem;background: red ;"
              v-if="data.operateObj.isShelve === 1"
              @click="() => methods.offline(0)"
              >下架</van-button
            >

            <van-button
              type="success"
              class="zi-btn"
              style="width: 9rem"
              v-if="data.operateObj.isShelve === 0"
              @click="() => methods.offline(1)"
              >上架</van-button
            >
          </div>
        </div>
        <div class="my_divider mtw"></div>
      </van-dialog>
      <!-- 操作按钮弹框 end-->

      <!-- 补货弹框 start -->
      <van-action-sheet v-model:show="sheet_show">
        <div class="content">
          <div class="myflex">
            <div>补货数量</div>
            <div>
              <van-stepper
                v-model="data.value"
                step="100"
                input-width="50px"
                button-size="32px"
                style=""
                integer
                min="1"
              />
            </div>
          </div>
          <div class="" style="margin-top: 50px">
            <van-button block type="primary" @click="() => methods.replenish()">
              确定</van-button
            >
          </div>
        </div>
      </van-action-sheet>
      <!-- 补货弹框 end -->

      <!-- 商品折扣弹框 start -->
      <van-action-sheet v-model:show="discount_show">
        <div class="contenttwo">
          <div>
            <!-- <div>商品名称</div>
            <div>
              
            </div> -->

            <van-cell-group inset>
              <van-field
                label="商品名称"
                :model-value="data.operateObj.name"
                disabled
              />
              <van-field
                label="原价格"
                :model-value="'￥' + data.operateObj.price"
                disabled
              />
              <van-field
                label="活动价格"
                placeholder="请输入活动价格"
                v-model="newprice"
              />

              <van-cell
                title="选择日期区间"
                v-model:value="date"
                @click="date_show = true"
                is-link
              />
              <van-calendar
                v-model:show="date_show"
                type="range"
                :min-date="data.minDate"
                :show-confirm="true"
                @confirm="methods.onConfirm"
              />
            </van-cell-group>
          </div>
          <div class="" style="margin-top: 50px; padding: 0px 10px 0px 10px">
            <van-button
              block
              type="primary"
              @click="() => methods.discount(111)"
            >
              确定</van-button
            >
          </div>
        </div>
      </van-action-sheet>
      <!-- 商品折扣弹框 end -->

      <!-- 底部按钮 start-->
      <div class="btn_bottom pds myflex">
        <van-button type="warning" style="width: 49.5%"
        @click="()=>methods.addType()"
          ><span
            class="iconfont icon-all"
            style="padding-right: 5px; font-size: 14px !important"
          ></span
          >管理分类</van-button
        >
        <van-button type="primary" style="width: 49.5%"
        @click="()=>methods.addGoods()"
          ><span
            class="iconfont icon-all"
            style="padding-right: 5px; font-size: 14px !important"
          ></span
          >新增商品</van-button
        >
      </div>
      <!-- 底部按钮 end-->
    </div>
  </van-skeleton>
  </div>
</template>
    <script setup>
import {
  SupplierGetTypesAndGoods,
  cancelPromoteGoods,
  getSupplierGoods,
  goodsShelve,
  goodsTop,
  promoteGoods,
  supplierBuhuo,
} from "@/api/manage";
import { showConfirmDialog, showToast } from "vant";
import { onMounted, reactive, ref, watchEffect } from "vue";
import { pages } from "../dto/pagesDto";
import { load } from "@/utils/load";
import { number } from "echarts";
import { loading } from "../dto/loadingDto";
import { useRouter } from "vue-router";
const active_top = ref(0);
const active = ref(0);
const shopData = ref([]); //所有商品
const date = ref(""); //折扣活动时间
const s_shopData = ref([]); //上架的商品
const x_shopData = ref([]); //下架的商品
const newprice = ref(""); //商品折扣价格
const router=useRouter();
const data = reactive({
  name: "订单页面",
  status: 1,
  value: 100,
  operateObj: {},
  minDate: new Date(),
  price: 0,
  isFirst:true
});
//商品操作按钮弹框属性
const show = ref(false);
//补货改变弹框属性
const sheet_show = ref(false);
//补货改变弹框属性
const discount_show = ref(false);
//商品折扣弹框属性
const date_show = ref(false);
const isFirst=ref(true);

const methods = {
  //点击图片查看详情
  toDetail:(item)=>{
  
    router.push("shop/manage/detail/"+item.id)
  },
  /**
   * 管理分类按钮
   */
  addType:()=>{
    //  router.push("/manage//add")
    router.push("/shop/type");
  },
  
  /**
   * 添加商品按钮
   */
   addGoods:()=>{
    router.push("/shop/manage/add");
  },
  /**
   * 选择日期后格式转换 商品折扣
   */
  formatDate: (date) =>
    `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`,
  /**
   * 选择日期弹框 订单数据
   */
  onConfirm: (values) => {
    const [start, end] = values;

    date_show.value = false;
    date.value = `${methods.formatDate(start)} - ${methods.formatDate(end)}`;
  },
  /**
   * 商品操作按钮
   */
  operate: (value) => {
    show.value = true;
    data.operateObj = value;
  },
  //侧边导航栏改变事件
  onChange: (value) => {
    // console.log(active, value);
  },
  //tab点击事件
  onClickTab: ({ title }) => {
    // console.log(active_top);
  },
  /**
   * 获取供应商的所有类别和类别下商品
   */
  getSupplierGoods: async () => {
    const res = await SupplierGetTypesAndGoods();
    if (res.result === 0) {
      // res.data.reverse();
      // console.log(res.data, "knncfsknfdkkndnfkdfdkfnks");
      shopData.value = res.data;
      isFirst.value=false;
    }

    //  shopData.value=res.data;
  },
  /**
   * 上架/下架
   */
  offline: async (value) => {
    load();
    const res = await goodsShelve({ id: data.operateObj.id, isShelve: value });
    if (res.result === 0) {
      showToast("操作成功");
      methods.getSupplierGoods();
    } else {
      showToast("操作失败");
    }
    show.value = false;
  },
  /**
   * 置顶/取消置顶
   */
  toping: async (value) => {
    load();
    show.value = false;

    const res = await goodsTop({ id: data.operateObj.id, isTop: value });
    if (res.result === 0) {
      showToast("操作成功");
      methods.getSupplierGoods();
    } else {
      showToast("操作失败");
    }
  },
  /**
   * 取消折扣
   */
  cancelPromoteGoods: async () => {
    load();
    show.value = false;
    const res = await cancelPromoteGoods({
      id: data.operateObj.id,
      price: data.operateObj.price,
    });
    if (res.result === 0) {
      showToast("操作成功");
      data.operateObj = {};
      methods.getSupplierGoods();
    } else {
      showToast("操作失败");
      data.operateObj = {};
    }
  },

  /**
   * 商品折扣确定事件
   */
  discount: async (value) => {
    if (newprice.value >= data.operateObj.price) {
      showToast("折扣价格应该小于原价");
      return;
    }
    load();
    const datesz = date.value.split("-");
    const datez = datesz[1].replaceAll("/", "-");
    const res = await promoteGoods({
      id: data.operateObj.id,
      promotePrice: newprice.value,
      birthday: datez,
    });
    methods.getSupplierGoods();
    if (res.result === 0) {
      showToast("操作成功");
    } else {
      showToast(res.message);
    }
    discount_show.value = false;
    data.newprice = "";
  },
  /**
   * 商品补货确定事件
   */
  replenish: async (value) => {
    load();
    const res = await supplierBuhuo({
      id: data.operateObj.id,
      number: data.value,
    });
    if (res.result === 0) {
      showToast("补货成功");
      sheet_show.value = false;
      data.operateObj = {};
      methods.getSupplierGoods();
    } else {
      showToast("补货失败");
      sheet_show.value = false;
      data.operateObj = {};
    }
  },
};

onMounted(() => {
  isFirst.value = true;
 
  const min = new Date().getFullYear() - 1;
  data.minDate = new Date(min, 1, 1);
  methods.getSupplierGoods();
});
watchEffect(() => {
  // methods.getSupplierGoods();
});
</script>


<style scoped>
/* .iconfont {
  font-size: 30px !important;
  position: absolute;
  right: -30%;
} */
/* 折扣弹出框样式 */
.contenttwo {
  padding: 30px 0px 250px;
  box-sizing: border-box;
}

/* 补货弹出框样式 */
.content {
  padding: 30px 15px 250px;
  box-sizing: border-box;
}

.dialog_flex {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

/* 底部管理分类/新增商品按钮 */
.btn_bottom {
  position: fixed;
  width: 100vw;
  bottom: 0;
  padding-bottom: 50px;
  background: #ffffff;
}
.shop {
  display: flex;
  padding: 5px 5px 5px 10px;
}
.shop-img {
  position: relative;
}
.topData {
  height: 60px;
  background: #faebd7;
}
</style>